<template>
	<view class="carBox">
		<view class="navBox">
			<view class="title">
				购物车
			</view>
			<view class="righttext" @click="handletextFlag">
				<view v-if="textFlag" class="">
					取消
				</view>
				<view v-else class="">
					管理
				</view>
			</view>
		</view>
		<view class="" style="height: 88rpx;"></view>
		<view v-if="cartList.length" class="dataList">
			<view class="dataItem" v-for="(item,index) in cartList" :key="item.id">
				<view class="" @click="handleCheck(item,index)">
					<image v-if="!item.check" src="../../static/image/a2.png" mode=""
						style="width: 32rpx;height:32rpx;margin-right: 20rpx;margin-top: 64rpx;"></image>
					<image v-else src="../../static/image/a1.png" mode=""
						style="width: 32rpx;height:32rpx;margin-right: 20rpx;margin-top: 64rpx;"></image>
				</view>

				<image :src="item.image" style="width: 160rpx;height: 160rpx;border-radius: 20rpx;" mode=""
					@click="handleDetails(item)"></image>
				<view class="itemRight">
					<view class="title">
						{{item.name}}
					</view>
					<text class="desc">
						{{item.sku_text}}
					</text>
					<view class="rightitem">
						<view class="price">
							₱{{item.price}}
						</view>
						<view class="numberBox">
							<view class="jian" @click="handlejianNumber(item,index)">
								-
							</view>
							<view class="number">
								{{item.num}}
							</view>
							<view class="jia" @click="handlejiaNumber(item,index)">
								+
							</view>
						</view>

					</view>

				</view>
			</view>
		</view>

		<view v-else class="">
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" text='购物车暂无商品'>
			</u-empty>
		</view>

		<view class="likeBox" style="margin-top: 30rpx;">
			<view class="heng"></view>
			<view class="">
				猜你喜欢
			</view>
			<view class="heng"></view>
		</view>

		<view class="likedataList">
			<view class="dataItem" v-for="(item,index) in likeProduct" :key="index" @click="handleDetail(item)">
				<image :src="item.image" style="width: 336rpx;height: 336rpx;border-radius: 20rpx;" mode="aspectFill"></image>
				<view class="" style="padding: 0 10rpx; box-sizing: border-box;">
					<view class="name">
						{{item.name}}
					</view>
					<!-- <view class="desc">
						补充维C | 低卡轻蔬
					</view> -->
					<view class="priceBox">
						<view class="price">
							₱{{item.sku_list[0].price}}
						</view>
						<view class="rightprice">
							/{{item.sku_list[0].sku_text}} <text v-if="item.market_price">₱{{item.market_price}}</text>
						</view>
					</view>
					<view class="describe">
						{{item.describe}}
					</view>

					<view class="bottomBox">
						<view class="ys">
							已售{{item.sold_count}}
						</view>
						<image src="../../static/image/tocar.png" style="width: 48rpx;height: 48rpx;" mode=""
							@click="addcart(item)">
						</image>
					</view>
				</view>
				<view v-if="item.weight==0" class="sc_box" @click="handleSxBox">
					<image class="sxicon" src="../../static/image/sx.png" mode=""></image>
				</view>

			</view>
		</view>

		<view class="" style="height: 200rpx;"></view>

		<view v-if="cartList.length" class="box_dibu dispAI">
			<view class="type_area dispAI dispJC">
				<view class="dispAI" @click="handleCheckall">
					<image v-if="!checkAll" src="../../static/image/a2.png"
						style="width: 30rpx;height: 30rpx;margin-right: 6rpx;" mode=""></image>
					<image v-else src="../../static/image/a1.png" style="width: 30rpx;height: 30rpx;margin-right: 6rpx;"
						mode=""></image>
					<view class="" style="font-size: 28rpx;color: #333333;font-weight: 400;">全选</view>
				</view>

				<view v-if="!textFlag" class="dispAI">
					<view class="" style="font-size: 32rpx;color: #FF3D3D;margin-right: 20rpx;font-weight: 400;">
						₱{{allPrice}}</view>
					<view class="box_dibu_btn" @click.stop="handlepay_sp">去结算（{{sumNum}}）</view>
				</view>
				<view v-else class="dispAI">
					<view class="box_dibu_btn" @click.stop="delshow=true">删除</view>
				</view>

			</view>
		</view>


		<u-modal :show="delshow" :title="title" :showCancelButton="true" @confirm="handleDelcart"
			@cancel="delshow = false" confirmColor="#439B05"></u-modal>




		<vk-data-goods-sku-popup ref="skuPopup" v-model="skuKey" border-radius="20" :localdata="goodsInfo"
			:mode="skuMode" @add-cart="handleAddcart" buyNowBackgroundColor="#FF3D3D"></vk-data-goods-sku-popup>

	</view>
</template>

<script>
	import {
		shopcardlist,
		editshopcarnum,
		delshopcar,
		guessLike,
		addshopcar,
		cardNum
	} from "@/api/api.js"
	export default {
		data() {
			return {
				number: 1,
				page: 1,
				page_size: 5,
				cartList: [],
				textFlag: false, //右上角管理/取消切换
				checkAll: false,
				title: "确定要删除商品吗？",
				delshow: false,
				allPrice: 0,
				likeProduct: [],
				sumNum: 0,
				skuKey: false, // 是否打开SKU弹窗
				skuMode: 1, // SKU弹窗模式
				goodsInfo: {}, // 后端返回的商品信息
			}
		},
		onLoad() {
			this.handleLikegood()
		},
		async onShow() {
			await this.handleCarnum()
			await this.handleCartList()
			this.checkAll = false
			await this.handleCheckall()
		},
		methods: {
			//猜你喜欢
			async handleLikegood() {
				let res = await guessLike()
				this.likeProduct = res.data
			},

			async handleCartList() {
				console.log("111")
				let res = await shopcardlist({
					page: this.page,
					page_size: this.page_size
				})
				this.cartList = res.data.data
				this.cartList.forEach((item, index) => {
					item.check = false
				})
			},
			async handlejianNumber(item, index) {
				if (this.cartList[index].num == 1) return
				this.cartList[index].num--
				let res = await editshopcarnum({
					id: this.cartList[index].id,
					num: this.cartList[index].num
				})
				this.handleSumprice()
			},
			async handlejiaNumber(item, index) {
				this.cartList[index].num++
				let res = await editshopcarnum({
					id: this.cartList[index].id,
					num: this.cartList[index].num
				})
				this.handleSumprice()
			},
			handletextFlag() {
				this.textFlag = !this.textFlag
			},
			//单选
			handleCheck(item, index) {
				// console.log("ssss",this.cartList[index].check)
				let flag = true
				this.cartList[index].check = !this.cartList[index].check
				this.cartList.forEach((item, index) => {
					if (!item.check) {
						flag = false
						return
					}
				})
				this.checkAll = flag
				this.handleSumprice()
				this.$forceUpdate()
			},
			//计算总金额
			handleSumprice() {
				this.allPrice = 0
				this.sumNum = 0
				this.cartList.forEach((item, index) => {
					if (item.check) {
						let prices = item.num * Number(item.price)
						this.allPrice = this.allPrice + prices
						this.sumNum = this.sumNum + item.num
					}
				})
			},
			//全选
			handleCheckall() {
				// console.log("222")
				this.checkAll = !this.checkAll
				this.cartList.forEach((item, index) => {
					item.check = this.checkAll
				})
				this.handleSumprice()
			},
			//立即购买
			handlepay_sp() {
				let dataList = []
				this.cartList.forEach((item, index) => {
					if (item.check) {
						dataList.push(item)
					}
				})
				if (dataList.length == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: "none",
						duration: 2000
					});
					return
				}
				uni.navigateTo({
					url: `../home/buyPage?data=${JSON.stringify(dataList)}`
				})
				// console.log("dataList", dataList)
			},
			//删除
			async handleDelcart() {
				let ids = []
				this.cartList.forEach((item, index) => {
					if (item.check) {
						ids.push(item.id)
					}
				})
				console.log("ids", ids.join(','))
				let res = await delshopcar({
					id: ids.join(',')
				})
				this.delshow = false
				uni.showToast({
					title: res.message,
					icon: "none",
					duration: 2000
				});
				if (res.code == 1000) {
					this.handleCartList()
					this.handleCarnum()
				}
			},
			handleDetail(item) {
				// console.log("33", item)
				uni.navigateTo({
					url: `../home/detail?id=${item.id}`
				})
			},
			handleDetails(item) {
				// console.log("55",item)
				uni.navigateTo({
					url: `../home/detail?id=${item.products_id}`
				})
			},

			addcart(data) {
				event.stopPropagation()
				// console.log("=========", data)
				let that = this
				that.goodsInfo = {
					"_id": data.sku_list[0].id,
					"name": data.sku_list[0].sku_name,
					"goods_thumb": data.image,
					"sku_list": data.sku_list,
					"spec_list": data.spec_list
				}
				that.skuKey = true;
			},

			async handleAddcart(selectShop) {
				// console.log("selectShop", selectShop)
				let data = {
					products_id: selectShop.products_id,
					sku_num_id: selectShop.id,
					num: selectShop.buy_num
				}
				// console.log("data", data)
				let res = await addshopcar(data)
				uni.showToast({
					title: res.message,
					icon: "none",
					duration: 2000
				});
				if (res.code == 1000) {
					this.skuKey = false;
					setTimeout(async () => {
						await this.handleCartList()
						await this.handleAgin()
						await this.handleCarnum()
					}, 1000)
				}
			},
			handleAgin() {
				this.checkAll = true
				this.cartList.forEach((item, index) => {
					item.check = this.checkAll
				})
				this.handleSumprice()
			},

			handleSxBox() {
				uni.showToast({
					title: '该商品已售罄！',
					icon: "none",
					duration: 2000
				});
				event.stopPropagation()
			},

			async handleCarnum() {
				let res = await cardNum()
				if (res.data > 0) {
					uni.setTabBarBadge({
						index: 2,
						text: res.data.toString()
					})
				} else {
					uni.removeTabBarBadge({
						index: 2,
						// text: '0'
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.carBox {
		width: 100%;
		min-height: 100%;
		background-color: #ffffff;


		.navBox {
			width: 100%;
			height: 88rpx;
			background-color: #ffffff;
			display: flex;
			z-index: 999;
			position: fixed;
			top: 0;

			.title {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 88rpx;
				margin-left: 326rpx;
			}

			.righttext {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #439B05;
				line-height: 88rpx;
				margin-left: 242rpx;
			}
		}

		.dataList {
			padding: 30rpx;
			box-sizing: border-box;

			.dataItem {
				display: flex;
				width: 690rpx;
				height: 220rpx;
				margin-bottom: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;
				width: 100%;


				.itemRight {
					margin-left: 20rpx;
					width: 398rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 33rpx;
					flex: 1;

					.title {
						width: 100%;
						font-weight: 500;
						white-space: nowrap;
						/* 设置不换行 */
						overflow: hidden;
						/* 设置超出部分隐藏 */
						text-overflow: ellipsis;
						/* 设置溢出的文本显示省略号 */
					}

					.desc {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #999999;
						background: #F5F5F5;
						line-height: 40rpx;
						margin-top: 10rpx;
						padding: 0 14rpx;
						box-sizing: border-box;
					}

					.rightitem {
						margin-top: 38rpx;
						display: flex;
						align-items: center;
						width: 100%;
						justify-content: space-between;

						.price {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 800;
							color: #FF3D3D;
							line-height: 33rpx;
						}

						.numberBox {
							display: flex;
							// width: 150rpx;
							height: 40rpx;
							border-radius: 10rpx;

							// border: #999999 1rpx solid;
							.jian {
								width: 56rpx;
								height: 40rpx;
								border-radius: 10rpx 0 0 10rpx;
								border: #999999 1rpx solid;
								text-align: center;
							}

							.number {
								width: 80rpx;
								height: 40rpx;
								border: #999999 1rpx solid;
								text-align: center;
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #333333;
								line-height: 40rpx;
							}

							.jia {
								width: 56rpx;
								height: 40rpx;
								border-radius: 0rpx 10rpx 10rpx 0rpx;
								border: #999999 1rpx solid;
								text-align: center;
							}
						}
					}
				}
			}

		}

		.likeBox {
			width: 370rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 33rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;

			.heng {
				width: 100rpx;
				height: 1rpx;
				background-color: #999999;
			}
		}

		.likedataList {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 20rpx;

			.dataItem {
				width: 336rpx;
				height: 564rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-bottom: 30rpx;
				position: relative;

				.sc_box {
					position: absolute;
					top: 0;
					left: 0;
					// z-index: 999999;
					width: 336rpx;
					height: 580rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					background-color: black;
					opacity: 0.5;
					display: flex;
					flex-direction: column;
					align-items: center;

					.sxicon {
						width: 300rpx;
						height: 300rpx;
					}
				}

				.name {
					width: 316rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 33rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.desc {
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #439B05;
				}

				.priceBox {
					display: flex;
					margin-top: 10rpx;

					.price {
						font-size: 28rpx;
						font-family: DIN, DIN;
						font-weight: 500;
						color: #FF3D3D;
						line-height: 33rpx;
					}

					.rightprice {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #BBBBBB;
						line-height: 28rpx;
					}
				}

				.describe {
					font-size: 20rpx;
					margin-top: 10rpx;
					color: #439B05;

				}

				.bottomBox {
					display: flex;
					width: 100%;
					justify-content: space-between;
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 23rpx;
					align-items: center;
				}
			}
		}


		.box_dibu_btn {
			width: 200rpx;
			height: 80rpx;
			background: #FF3D3D;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}

		.box_dibu {
			width: 100%;
			/* height: 100rpx; */
			padding-top: 30rpx;
			padding-bottom: 50rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 90rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS 设备 */
			padding-bottom: env(safe-area-inset-bottom);
		}


	}
</style>